<template>
  <div class="comment-container" :spinning="listLoading">
    <a-comment v-for="(item,index) in children" :id="item.id" :key="index" :class="item.pid===null&&'my-comment'">
      <template slot="actions">
        <span key="comment-basic-like">
          <a-tooltip title="Like">
            <a-icon type="like" :class="activeCommentGoods===item.id?'info-like goodsActive':'info-like'" @click="commentGood(item.id)" />
          </a-tooltip>
          <span style="padding-left: 2px;cursor: auto">
            {{ item.commentGood }}
          </span>
        </span>
        <span key="comment-basic-reply-to" @click="replyClick(item)">回复</span>
        <span slot="actions">{{ item.childrenCount }}条回复</span>
        <span slot="actions">{{ moment(item.createdTime).format('YYYY-MM-DD') }}</span>
      </template>
      <a slot="author" style="color: darkred">{{ item.user.nickname }}</a>
      <div slot="avatar" class="my-avatar-img-container">
        <img class="my-avatar-img" :src="item.user.header" alt="item.user.nickname">
      </div>
      <!--<a-avatar
        slot="avatar"
        :src="item.user.header"
        :alt="item.user.nickname"
      />-->
      <p slot="content">
        {{ item.commentContent }}
      </p>
      <a-tooltip slot="datetime" :title="item.createdTime">
        <span>{{ moment(item.createdTime).fromNow() }}</span>
      </a-tooltip>
      <reply-item :children="item.children" @getCommentByBlogId="getCommentByBlogId" @getNickName="getNickName" />
    </a-comment>
  </div>

</template>

<script>
import commentApi from '@/api/comment'
import moment from 'moment'
export default {
  name: 'ReplyItem',
  props: {
    children: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      moment,
      activeCommentGoods: '',
      replycomments: '',
      commentVisible: '',
      commentChildren: [],
      listLoading: true
    }
  },
  created() {
  },
  methods: {
    getNickName(obj) {
      this.$emit('getNickName', obj)
    },
    getCommentByBlogId(blogId) {
      this.$emit('getCommentByBlogId', blogId)
    },
    // 评论点赞
    commentGood(commentId) {
      this.listLoading = true
      commentApi.commentGoods({ commentId: commentId }).then(res => {
        if (res.code === 200) {
          this.listLoading = false
          this.activeCommentGoods = commentId
          this.$emit('getCommentByBlogId', this.$route.params.id)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 点击回复
    replyClick(item) {
      var elementById = document.getElementById('reply-comment')
      if (elementById) {
        elementById.scrollIntoView(false)
        const obj = {
          nickName: item.user.nickname,
          id: item.id
        }
        this.$emit('getNickName', obj)
      } else {
        this.$message.error('请登录之后再评论哦')
      }

      /* if (id === 0) {
        this.parentReplyVisible = true
        this.childReplyVisible = false
      } else if (id === 1) {
        this.parentReplyVisible = false
        this.childReplyVisible = true
      }*/
    }
  }
}
</script>

<style lang="less">
  .comment-list{
    background-color: #fff;
    .itemStyle{
      padding: 20px;
    }
  }
  .ant-list-split .ant-list-header {
    border-bottom: 1px solid #e8e8e8;
    padding-left: 20px !important;
  }
  .comment-container .ant-comment{
    /*background-color: #fff !important;*/
  }
  .ant-comment-inner{
    display: flex;
    margin-left: 15px;
    padding: 12px 15px 7px 0;
    border-bottom: 1px solid #e7e7e7;
  }
  .ant-comment-actions {
    margin-top: 7px;
    margin-bottom: 5px;
    padding-left: 0;
  }
  .comment-container{
    width: 100%;
  }
  /*最外层那个评论hover的颜色*/
  .comment-container .my-comment:hover{
    width: 100%;
    height: 100%;
    background-color: rgba(235, 235, 235, 0.79) !important;
  }
  .my-avatar-img-container{
    width: 46px;
    height: 46px;
    padding: 2px;
    border-radius: 6px;
    box-shadow: 0 2px 15px #d0d5de;
    background-color: #f2f2f2;
    .my-avatar-img{
      width:100% !important;
      height:100% !important;
      border-radius: unset!important
    }
  }
  .goodsActive{
    color: red;
  }
</style>
